<!--  -->
<template>
<view class='backcolor'>
			<view class="topBack">
			</view>
			<!-- 验证码登录 -->
			<view class="head-inp" v-if="sex">
				<view class="head-text">
					<text>验证码登录</text>
					<text @click="pwd('pwd')">密码登录</text>
				</view>
				<view class="head-inpust">
					<input type="text" placeholder="请输入手机号" value="" v-model="mobile" />
					<input type="text" placeholder="请输入验证码" value="" v-model="code" />
					<text @click="throttlecode" v-if="isshow">获取验证码</text>
					<text v-else style="margin-left: 30px;">{{num}}秒</text>
				</view>
			</view>
			<!-- 密码登录 -->
			<view class="head-inp" v-else>
				<view class="head-text">
					<text>密码登录</text>
					<text @click="pwd('code')">验证码登录</text>
				</view>
				<view class="head-inpust">
					<input type="text" placeholder="请输入账号" v-model="account" value="" />
					<input type="password" placeholder="请输入密码" v-model="accountPwd" />
				</view>
			</view>
			<view class="body">
				<button @click="throttlefun">登录</button>
			</view>
			<view class="bottom-text">
				<text @click="$nav('../userRegister/userRegister')">没有账号，立即注册</text>
			</view>
</view>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {login} from '../../static/api/apis.js'
import {throttle} from '../../tool/throttle.js'
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
	sex:true,
	mobile:"",
	code:'',
	num:"60",
	isshow:true,
	account:"",
	accountPwd:"",
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
onLoad(data) {
	console.log("data",data)
	if(data.show){
		this.account = data.data
		this.sex = false;
	}
},
//方法集合
methods: {
	//切换验证码登录 还是密码登录
pwd(state){
	console.log("state",state)
	if(state==='pwd'){
		this.sex = false;
	}else if(state==='code'){
		this.sex = true
	}
},
//获取验证码
	async gainCode(){
		var ptn_tel = /^1[35789]\d{9}$/; //账号
		if(!this.mobile.match(ptn_tel) || this.mobile===''){
			wx.showToast({
				title: '请检查你填写的手机号，是否正确，并且手机号不能为空', //弹出的文字
				icon: 'error', //显示成功图标
				duration: 2000 //弹出的事件
			})
		}else{
			uni.showLoading({
				mask:true,
			    title: '发送中......'
			});
			console.log("格式没问题")
			let res = await login.sendCode({
				mobile:this.mobile,
			})
			if (res.errCode == '10000') {
				//更改倒计时状态
				setTimeout(function () {
				    uni.hideLoading();
				}, 1000);
				// uni.hideLoading();
				this.isshow = !this.isshow
				//开始倒计时
				let self = this
				let djs = setInterval(function() {
					self.num--
					if (self.num == 0) {
						self.isshow = !self.isshow
						self.num = 30
						clearInterval(djs)
					}
				}, 1000)
			}else{
				wx.showToast({
					title: res.errMsg, //弹出的文字
					icon: 'error', //显示成功图标
					duration: 2000 //弹出的事件
				})
			}
			console.log(res)
		}
	},

	async login(){
		if(this.sex){
			var ptn_tel = /^1[35789]\d{9}$/; //账号
			if(!this.mobile.match(ptn_tel) || this.mobile===''){
				wx.showToast({
					title: '请检查你填写的手机号，是否正确，并且手机号不能为空', //弹出的文字
					icon: 'error', //显示成功图标
					duration: 2000 //弹出的事件
				})
			}
			
			else if(this.code===''){
				wx.showToast({
					title: '验证码不能为空', //弹出的文字
					icon: 'error', //显示成功图标
					duration: 2000 //弹出的事件
				})
			}else{
				uni.showLoading({
					mask:true,
				    title: '登录中......'
				});
				let res = await login.codElogin({
					mobile:this.mobile,
					code:this.code
				})
				if(res.errCode=='10000'){
					uni.setStorageSync('token', res.data.token) //存
					uni.setStorageSync("info", res.data.member)
					setTimeout(function () {
					    uni.hideLoading();
						uni.switchTab({ //跳传到首页
							url: "/pages/index/index",
						})
					}, 2000);
				}else{
					wx.showToast({
						title: res.errMsg, //弹出的文字
						icon: 'error', //显示成功图标
						duration: 2000 //弹出的事件
					})
				}
				console.log(res)
		}

		}else{
			uni.showLoading({
				mask:true,
			    title: '登录中......'
			});
			let res = await login.member({
				    mobile: this.account,
				    pass: this.accountPwd,
			})
			console.log('res',res)
			if(res.errCode=='10000'){
				uni.setStorageSync('token', res.data.token) //存
				uni.setStorageSync("info", res.data.member)

				setTimeout(function () {
				    uni.hideLoading();
					uni.switchTab({ //跳传到首页
						url: "/pages/index/index",
					})
				}, 2000);
			}else{
				wx.showToast({
					title: res.errMsg, //弹出的文字
					icon: 'error', //显示成功图标
					duration: 2000 //弹出的事件
				})
			}
		}
	},
	//登录节流
	throttlefun :throttle (function(){
		this.login()
	},1000),
	//获取验证码节流
	throttlecode :throttle (function(){
		this.gainCode()
	},1000),
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
console.log("throttle",throttle)
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
@import  url('../../static/css/login.less');
</style>
// 不要加scoped属性
<style lang="scss">
.uni-navbar {
  .uni-navbar__content {
    border: 0 none !important;
  }
}
</style>
